<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>邮件发送</title>
<script
	src="${ctx}/static/js/selectWin/userSelector.js?version=${applicationScope.jsVersion }"
	type="text/javascript"></script>

<script type="text/javascript">
	var $grid;
	var $InfoGrid;
	var $UserSelector, $UserGroupSelector;
	var selectedGroup;
	$(function() {
		$grid = $("#grid").datagrid({
			url : "${ctx}/basic/notifyGroup/dataGrid",
			title : "邮件分组",
			method : "get",
			idField : "id",
			remoteSort : true,
			multiSort : true,
			singleSelect : true,
			rownumbers : true,
			fit : true,
			toolbar : '#tt',
			pagination : true,
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'user',
				title : '所属用户',
				sortable : true,
				formatter : function(val) {
					return val ? val.trueName : "";
				}
			}, {
				field : 'groupName',
				title : '组名',
				sortable : true
			}, {
				field : 'displayOrder',
				title : '显示顺序',
				sortable : true
			} ] ],
			enableHeaderClickMenu : true, //此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
			enableHeaderContextMenu : true, //此属性开启表头列名称右键点击菜单
			enableRowContextMenu : false,
			onClickRow : function(rowIndex, rowData) {
				selectedGroup = rowData;
				refreshGroup();//刷新当前分组成员
			}
		});

		$InfoGrid = $("#infoGrid").datagrid({
			method : "get",
			idField : "id",
			remoteSort : "true",
			multiSort : true,
			rownumbers : true,
			//singleSelect : true,
			fit : true,
			toolbar : '#infott',
			pagination : true,
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'notifyGroup',
				title : '所属邮件组',
				sortable : true,
				formatter : function(val) {
					return val ? val.groupName : "";
				}
			}, {
				field : 'user',
				title : '用户',
				sortable : true,
				formatter : function(val) {
					return val ? val.trueName : "";
				}
			} ] ],
			enableHeaderClickMenu : true, //此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
			enableHeaderContextMenu : true, //此属性开启表头列名称右键点击菜单
			enableRowContextMenu : false
		});

		$UserSelector = $("#user_user").comboselector(userSelectOpts);
		$UserGroupSelector = $("#user_group").comboselector($.extend(userSelectOpts, {
			disabled : true
		}));

		//分组增加按钮
		$("#add").click(function() {
			$("#fm").form("clear");
			$('#fm').form('load', {
				enable : 1
			});

			$("#dlg").dialog("open").dialog("setTitle", "新增分组");
			$UserGroupSelector.combo("setText", $("#userName").val()).combo("setValue", $("#userId").val());

		});

		//分组编辑按钮
		$("#edit").click(function() {
			var rowData = $grid.datagrid("getSelected");
			if (rowData == null) {
				$.messager.show({
					msg : "您未选中行，无法编辑",
					icon : "warning",
					position : "bottomRight"
				});
			} else {
				$("#dlg").dialog("open").dialog("setTitle", "编辑分组");
				$("#fm").form("load", rowData);
				if (rowData.user) {
					$UserGroupSelector.combo("setText", rowData.user.trueName);
					$UserGroupSelector.combo("setValue", rowData.user.id);
				}
			}
		});

		//分组删除按钮
		$("#delete").click(function() {
			multiDeleteDataGrid($grid, "${ctx}/basic/notifyGroup/multiDelete");
		});

		//分组查询
		$("#search").click(function() {
			$grid.datagrid('load', $("#tt").form("getData"));
		});

		//成员增加按钮
		$("#infoadd").click(function() {
			var rowData = $grid.datagrid("getSelected");
			if (rowData == null) {
				$.messager.show({
					msg : "您未选中行，无法添加成员",
					icon : "warning",
					position : "bottomRight"
				});
			} else {
				$("#infofm").form("clear");
				$('#infofm').form('load', {
					enable : 1
				});

				$("#infodlg").dialog("open").dialog("setTitle", "新增成员");
				$("#infofm").form("clear").form("load", {
					notifyGroup : selectedGroup.id,
					notifyGroupName : selectedGroup.groupName
				});
			}

		});

		//成员编辑按钮
		$("#infoedit").click(function() {
			var rowData = $InfoGrid.datagrid("getSelected");
			if (rowData == null) {
				$.messager.show({
					msg : "您未选中行，无法编辑",
					icon : "warning",
					position : "bottomRight"
				});
			} else {
				$("#infodlg").dialog("open").dialog("setTitle", "编辑成员");

				$("#infofm").form("load", rowData);

				if (rowData.user) {
					$UserSelector.combo("setText", rowData.user.trueName);
					$UserSelector.combo("setValue", rowData.user.id);
				}
				if (rowData.notifyGroup) {
					$("#notifyGroup").val(rowData.notifyGroup.id);
					$("#notifyGroupName").val(rowData.notifyGroup.groupName);
				}
			}
		});

		//成员删除按钮
		$("#infodelete").click(function() {
			var rowData = $InfoGrid.datagrid("getSelected");
			if (rowData == null) {
				$.messager.show({
					msg : "您未选中行，无法删除",
					icon : "warning",
					position : "bottomRight"
				});
			} else
				multiDeleteDataGrid($InfoGrid, "${ctx}/basic/notifyGroupUser/multiDelete");
		});

		//成员查询
		$("#infosearch").click(function() {
			$InfoGrid.datagrid('load', $("#infott").form("getData"));
		});

	});

	//刷新分组成员
	function refreshGroup() {
		if (!selectedGroup) {
			showAlert("请先选择分组");
			return false;
		}
		$InfoGrid.datagrid({
			url : "${ctx}/basic/notifyGroupUser/dataGrid?search_EQ_notifyGroup.id=" + selectedGroup.id
		});
	}

	//分组保存
	function fn_save() {
		$("#fm").form("submit", {
			url : "${ctx}/basic/notifyGroup/update",
			success : function(data) {
				$grid.datagrid("load");
				$.messager.show({
					msg : data.msg,
					icon : "info",
					position : "bottomRight"
				});
				$("#dlg").dialog('close');
			}
		});
	}

	//成员保存
	function fn_info_save() {
		$("#infofm").form("submit", {
			url : "${ctx}/basic/notifyGroupUser/update",
			success : function(data) {
				$InfoGrid.datagrid("load");
				$.messager.show({
					msg : data.msg,
					icon : "info",
					position : "bottomRight"
				});
				$("#infodlg").dialog('close');
			}
		});
	}
</script>

</head>
<body>
	<!-- 分组 -->
	<div data-options="region:'center'" data-options="fit:true"
		style="padding: 1px;">
		<div id="cc" class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'"
				style="padding: 1px; witdh: 500px">
				<input id="userName" type="hidden" value="${userName}" /> <input
					id="userId" type="hidden" value="${userId}" />
				<table id="grid">
				</table>
				<div id="tt" class="easyui-toolbar">
					<div class="dialog-tool-separator"></div>
					<a id="add" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-standard-add'">新增</a> <a
						id="edit" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a>
					<a id="delete" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
					<div class="dialog-tool-separator"></div>
				</div>
			</div>

			<!-- 添加分组表单 -->
			<div id="dlg" class="easyui-dialog"
				style="width: 300px; height: 400px; padding: 10px 20px"
				data-options="iconCls:'icon-save',resizable:true,modal:true, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
				<form id="fm" method="post">
					<input type="hidden" name="id" />
					<table id="tbl">
						<tr>
							<td><label>成员:</label></td>
							<td><input id="user_group" name="user"></td>
						</tr>
						<tr>
							<td><label>组名:</label></td>
							<td><input name="groupName" class="easyui-validatebox"
								data-options="required: true"></td>
						</tr>
						<tr>
							<td><label>显示顺序:</label></td>
							<td><input name="displayOrder" class="easyui-validatebox"
								data-options="required: true"></td>
						</tr>
					</table>

				</form>
			</div>

			<!-- 成员 -->
			<div id="InfoPanel"
				data-options="region:'east', title:'选择联系人', split:true, collapsible:true"
				style="padding: 1px; width: 600px">

				<table id="infoGrid">
				</table>

				<div id="infott" class="easyui-toolbar">
					<span>成员：</span> <input type="text"
						name="search_LIKE_user.trueName"
						style="margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 3px;" />
					<a id="infosearch" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-zoom'">查询</a>
					<div class="dialog-tool-separator"></div>
					<a id="infoadd" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-standard-add'">新增</a> <a
						id="infoedit" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a>
					<a id="infodelete" class="easyui-linkbutton"
						data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
					<div class="dialog-tool-separator"></div>
				</div>
			</div>

			<!-- 添加成员表单 -->
			<div id="infodlg" class="easyui-dialog"
				style="width: 300px; height: 400px; padding: 10px 20px"
				data-options="iconCls:'icon-save',resizable:true,modal:true, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_info_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#infodlg').dialog('close'); } }
                ],closed:true">
				<form id="infofm" method="post">
					<input type="hidden" name="id" /> <input type="hidden"
						name="notifyGroup" id="notifyGroup" />
					<table id="tbl">
						<tr>
							<td><label>所属分组:</label></td>
							<td><input name="notifyGroupName" id="notifyGroupName"
								class="easyui-validatebox" data-options="required: true"
								readonly="readonly"></td>
						</tr>
						<tr>
							<td><label>用户:</label></td>
							<td><input id="user_user" name="user"></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
</body>
</html>